How can I edit this code from W3 schools to make it scroll slower by only using JQuery? It currently just jumps to the top. Is there a way to slow it down so the user can see that they are actually going back up to the top of the page? Ideally the entire thing should be in JQuery if possible.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div>Edit for Pure jQuery
You're looking for the jQuery .animate() method. Check out:
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
They're using this.hash to find the destination of the smooth scroll. You can omit it, and replace with '0' for scroll-to-top. If you're new to this.hash, look at:
Add jQuery to your html head with:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
and replace your topFunction with:
function topFunction() {
$('html, body').animate({
scrollTop: 0
}, 500);
}
'500' is the duration of the scroll animation in milliseconds.
You can try using scrollTo with the smooth behavior https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo#examples
Though it doesn't work on Safari (I see it works only from Safari 14 and on now), for safari you need to add a polyfill https://github.com/iamdustan/smoothscroll
Just expand your scrollTop call like that:
window.scrollTo({top: 0, behavior: 'smooth'});